<template>
    <div>
        <!-- 查看更多 -->
        <div ref="bottom" class="lookMore" @click="$emit('loadMore',{pagep:pages()})">{{this.page>=5?"到底了...":`第${pagep}段,点击查看更多`}}</div>
    </div>
</template>
<script>
export default {
    name:'SeeMore',
    props:["page"],
    data(){
        return {
            // 往回传值时报错,不能直接修改 传过来属性 ,需要 另取一个属性名来存储
            pagep:this.page
        }
    },
    methods:{
        pages(){
            if(this.pagep>=5){
                return this.pagep;
            }
            return ++this.pagep;
        },
        // 滚动加载  --失败
        // loadMore(){
        //     if(this.pagep>=10){
        //         return;
        //     }
        //     this.pagep++;
        // },
        // windowScroll(){
        //     console.log("滚动==>",window.scrollY,window.innerHeight,this.$refs.bottom.offsetTop);
        //     if(window.scrollY+window.innerHeight>this.$refs.bottom.offsetTop){
        //         console.log("滚动触发")
        //         this.loadMore();
        //     }
        // },
        
    },
    // mounted(){
    //     window.addEventListener("scroll",this.windowScroll);
    // },
    // brforeRouteEnter(to,from,next){
    //     next(vm=>{
    //         window.addEventListener("scroll",vm.windowScroll);
    //     });
    // },
    // brforedDestroy(){
    //     window.removeEventListener("scroll",this.windowScroll)
    // },
    // brforeRouteLeave(to,from,next){
    //     window.removeEventListener("scroll",this.windowScroll);
    //     next();
    // },

}
</script>
<style lang="less" scoped>
.lookMore{
    height: 54px;
    text-align: center;
    line-height: 54px;
    color: #999;
    font-size: 15px;
    position: relative;
    // margin-bottom: 60px;  ///待修改
    &::after{
        content: "";
        position: absolute;
        width: 8px;
        height: 14px;
        background: url(../assets/image/arrow_icon.png) no-repeat;
        background-size: 8px 14px;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 5px;
    }
}
</style>